<template>
	<view>
		<view class="navbar">
			<uni-search-bar @confirm="search" :focus="true" style="background: #fff;" v-model="searchName"></uni-search-bar>
			<!-- 导航栏内容 -->
			<view class="menu">
				<view class="menu-scroll">
					<view v-for="(m, i) in menus" :key="m" :class="['menu-item', i === activeIndex && 'active']" @click="activeIndex = i" @tap="switchTab">
						{{ m }}
					</view>
				</view>
				<view v-if="visible" class="modal"/>
			</view>
		</view>
		<!-- 页面内容 -->
		<view class="Grid">
			<view class="Grid-Item" v-for="item in tableData" :key="item.id" @click="navigateToPage(item)">
				<view class="container">
					<span class="GSname">
						{{ item.equipmentName }}
					</span>
					<span>
						<image :src="getIconByStatus(item.online)" class="slot-img img-right"></image>
					</span>
				</view>
				<view class="line"></view>

				<!-- 地址区域垂直居中 -->
				<view class="GSaddress">
					<span class="iconfont icon-small" v-html="weizhiIcon"></span>
					<span>
						{{ item.address }}
					</span>
				</view>
			</view>
		</view>
		<!-- 加载更多提示 -->
		<view class="load-more" v-if="tableData.length > 0">
			<text v-if="isLoading">加载中...</text>
			<text v-else-if="tableData.length >= total">没有更多数据了</text>
			<text v-else>上拉加载更多</text>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request';
	export default {
		onLoad(options) {
			this.typeId = JSON.parse(options.type).id;
			this.shebeiIcon = JSON.parse(options.type).appIcon;
		},
		// 添加下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1;
			this.load(true);
		},
		// 添加上拉加载
		onReachBottom() {
			if (this.pageNum * this.pageSize >= this.total) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none',
					duration: 1000
				});
			} else {
				this.isLoading = true;
				this.pageNum++;
				this.load(false);
			}
		},
		data() {
			return {
				shebeiIcon: "",
				weizhiIcon: "&#xe65e;",
				menus: ["全部", "在线", "离线"],
				activeIndex: 0,
				visible: false,
				statusIcons: {
					"0": '../../static/online_icon/online-icon.png',
					"1": '../../static/online_icon/offline-icon.png'
				},
				typeId: '',
				searchName: '',
				// 添加分页参数
				pageNum: 1,
				pageSize: 20,
				total: 0,
				isLoading: false,
				tableData: []
			};
		},
		mounted() {
			this.load(true);
		},
		methods: {
			switchTab(){
				this.pageNum = 1;
				this.load(true);
			},
			navigateToPage(item) {
				var objStr = JSON.stringify(item);
				uni.navigateTo({
					url: '/pages/equipment/particular?equipment=' + objStr,
				});
			},
			getIconByStatus(status) {
				return this.statusIcons[status] || '';
			},
			search(res) {
				this.pageNum = 1;
				this.load(true);
			},
			load(isRefresh) {
				this.isLoading = true;
				let level = this.$store.state.userInfo.level;
				let organizationId = this.$store.state.userInfo.organization;
				let isAllClient = this.$store.state.userInfo.isAllClient;
				let clientIds;
				if (isAllClient === "1") {
					clientIds = this.$store.state.userInfo.clientIds;
				} else {
					clientIds = [];
				}
				let online;
				if (this.activeIndex === 0) {
					online = ""
				} else if (this.activeIndex === 1) {
					online = '0'
				} else {
					online = '1'
				}
				request.get("/equipment-input-store/pageApp?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&organizationId=" + organizationId +
						"&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&type=" + this.typeId + "&online=" + online + "&equipmentName=" + this.searchName).then(res => {
					if (res.code === '200') {
						if (isRefresh) {
							// 下拉刷新或首次加载，替换数据
							this.tableData = res.data.record || [];
							uni.stopPullDownRefresh();
						} else {
							// 上拉加载，追加数据
							this.tableData = this.tableData.concat(res.data.record || []);
						}
						this.total = res.data.total || 0;
					}
					this.isLoading = false;
				}).catch(() => {
					this.isLoading = false;
					if (isRefresh) {
						uni.stopPullDownRefresh();
					}
				})
			},
		}
	};
</script>

<style lang='scss' scoped>
	.line {
		border: none;
		border-top: 1px solid var(--gray-color);
	}

	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.img-left {
		margin-top: 5px;
		margin-left: 10px;
	}

	.img-right {
		margin-top: 5px;
		margin-left: 10px;
		width: 24px;
		height: 24px;
	}

	.navbar {
		position: sticky;
		z-index: 99;
		top: 0;
		background-color: #f8f8f8;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.menu-bar {
		position: relative;
		z-index: 10;
	}

	.menu {
		display: flex;
		width: 100%;
		height: 70px;
		padding: 16px 12px 12px 10px;
		background-color: #fff;
		box-sizing: border-box;
	}

	.menu .menu-scroll {
		display: flex;
		width: 100%;
		/* overflow-x: scroll; */
	}

	.menu-item {
		padding: 0 12px;
		flex-shrink: 0;
		font-size: 16px;
		color: #333;
		cursor: pointer;
	}

	.menu-item.active {
		color: #478CF6;
		font-weight: 700;
		border-bottom: 2px solid #478CF6;
	}

	.modal {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.Grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: space-between;
		padding: 30rpx;
		column-gap: 10px;
		row-gap: 20rpx;
		box-sizing: border-box;
	}

	.Grid-Item {
		width: 48%;
		height: 220rpx;
		border: 1px solid #e2e2e2;
		box-sizing: border-box;
		border-radius: 10rpx;
		background: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		display: flex;
		flex-direction: column;
	}

	.Grid-Item:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	}

	.GSname {
		font-size: 14px;
		color: #333;
		font-weight: bold;
		margin-left: 15px;
		margin-top: 10px;
	}

	.GSaddress {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #888;
		margin-left: 15px;
		margin-top: 8px;
		margin-bottom: 10px;
		justify-content: flex-start;
		flex-grow: 1; /* 使地址区域可以占满剩余空间 */
	}

	.GSaddress .iconfont {
		font-size: 16px;
		color: #478CF6;
		margin-right: 5px;
	}

	/* 加载更多样式 */
	.load-more {
		text-align: center;
		padding: 20rpx;
		font-size: 14px;
		color: #999;
	}
</style>
